<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Dev &#8211; 西去无狗</title>
<meta name="description" content="">

    





<meta name="twitter:title" content="Dev">
<meta name="twitter:description" content="众鸟高飞尽，孤云独去闲；相看两不厌，只有敬亭山。">




<meta property="og:type" content="article">
<meta property="og:title" content="Dev">
<meta property="og:description" content="众鸟高飞尽，孤云独去闲；相看两不厌，只有敬亭山。">
<meta property="og:url" content="http://dev.fengaili.com/dev/">
<meta property="og:site_name" content="西去无狗">



  <meta property="og:updated_time" content="2018-05-11T00:00:00&#43;00:00"/>






<link rel="canonical" href="http://dev.fengaili.com/dev/">

  <link href="http://dev.fengaili.com/dev/index.xml" rel="alternate" type="application/rss+xml" title="西去无狗" />
  <link href="http://dev.fengaili.com/dev/index.xml" rel="feed" type="application/rss+xml" title="西去无狗" />


<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" href="/css/main.css">

<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic" rel="stylesheet" type="text/css">

<meta http-equiv="cleartype" content="on">

<meta name="generator" content="Hugo 0.40.2" />

<script src="/js/vendor/modernizr-2.6.2.custom.min.js"></script>


<link rel="shortcut icon" href="/favicon.png">


</head>

<body id="post-index" >
<nav id="dl-menu" class="dl-menuwrapper" role="navigation" style="display:inline-block">
	<button class="dl-trigger">Open Menu</button>
	<ul class="dl-menu">
		<li><a href="/">Home</a></li>
		
	
		
	    <li><a href="/blog/" >生活笔记</a></li>
	  
	    <li><a href="/tags/" >tags</a></li>
	  
	    <li><a href="/posts/" >posts</a></li>
	  
	</ul>
</nav>

<div class="entry-header">
  
  <div class="header-title">
    <div class="header-title-wrap">
		<h1><a href="/" title="Go to the homepage">西去无狗</a></h1>
	  <h2>
            
            
              Dev
            
          </h2>
    </div>
  </div>
</div>

<div id="main" role="main">

<article class="hentry">
  <header>
    
    <div class="entry-meta">
         
		<span class="entry-date date published updated"><time datetime="2018-05-11 00:00:00 &#43;0000 UTC"><a href="/dev/replace_my_imac_ssd/">May 11, 2018</a></time></span>
        
      <span class="entry-reading-time">
        <i class="fa fa-clock-o"></i>
        Reading time ~1 minute
      </span>
    </div>
    
	<h1 class="entry-title"><a href="/dev/replace_my_imac_ssd/" rel="bookmark" title="升级老款imac硬盘" itemprop="url">升级老款imac硬盘</a></h1>
    
  </header>
  <div class="entry-content">
    

<blockquote>
<p>2012年末的imac有点过份慢，用软件测了下磁盘性能，大约只有50M/s的写入速度。
由于之前在笔记本上更换ssd获得了很大的性能提升，所以设想把imac的也替换下。</p>
</blockquote>

<h1 id="准备工作">准备工作：</h1>

<h2 id="确认电脑型号">确认电脑型号。</h2>

<pre><code>2012年末 imac late
imac内部只有一个sata位置，之前硬盘需要拆掉。
imac之前硬盘有温控装置，换之后风扇会狂转，可以用软件控制。
目前市面上支持sata的ssd硬盘速率大约550M/s
</code></pre>

<h2 id="拆机方式在淘宝上打听了下需要400">拆机方式在淘宝上打听了下需要400￥</h2>

<pre><code>imac内部只有一个sata位置，之前硬盘需要拆掉。
imac之前硬盘有温控装置，换之后风扇会狂转，可以用软件控制。
目前市面上支持sata的ssd硬盘速率大约550M/s
</code></pre>

<h2 id="外置硬盘方式">外置硬盘方式。</h2>

<pre><code>imac支持usb3，理论速度最大大约640M/s
三星的t5外置ssd硬盘速度可以 550m/s
imac支持外置硬盘装系统。
</code></pre>

<p>最后，亚马逊评论区，用这款ssd装mac系统的用户不少。
<a href="https://www.amazon.com/Samsung-T3-Portable-SSD-MU-PT500B/product-reviews/B01AVF6UQQ/ref=cm_cr_othr_d_paging_btm_9?ie=UTF8&amp;reviewerType=all_reviews&amp;pageNumber=9">亚马逊的评论有干货</a></p>

<hr />

<h2 id="确定可行-jd下单-https-item-jd-com-15972330408-html-等待收货安装">确定可行，<a href="https://item.jd.com/15972330408.html">jd下单</a>等待收货安装。</h2>

<h2 id="安装系统步骤">安装系统步骤</h2>

<ol>
<li><a href="https://www.ifixit.com/Answers/View/264094/How+can+I+install+OS+X+on+a+new+ssd">How can I install OS X on a new ssd</a></li>
<li><a href="https://zh.wikihow.com/%E7%BB%99Mac%E7%94%B5%E8%84%91%E5%81%9A%E5%A4%87%E4%BB%BD">如何给Mac电脑做备份</a></li>
<li><a href="https://forums.macrumors.com/threads/is-anyone-here-booting-the-os-from-a-t3-t5-external-ssd.2091818/">mac 国外论坛</a></li>
</ol>

  </div>
</article>

<article class="hentry">
  <header>
    
      <div class="entry-image-index">
		  <a href="/dev/visual_studio_code_-snnipet/" title="为Visual Studio code增加markdown自定义代码提示"><img src="/images/abstract-11.jpg" alt="为Visual Studio code增加markdown自定义代码提示"></a>
      </div>
    
    <div class="entry-meta">
         
		<span class="entry-date date published updated"><time datetime="2018-05-08 00:00:00 &#43;0000 UTC"><a href="/dev/visual_studio_code_-snnipet/">May 8, 2018</a></time></span>
        
      <span class="entry-reading-time">
        <i class="fa fa-clock-o"></i>
        Reading time ~2 minutes
      </span>
    </div>
    
	<h1 class="entry-title"><a href="/dev/visual_studio_code_-snnipet/" rel="bookmark" title="为Visual Studio code增加markdown自定义代码提示" itemprop="url">为Visual Studio code增加markdown自定义代码提示</a></h1>
    
  </header>
  <div class="entry-content">
    

<blockquote>
<p>为Visual Studio code增加markdown 自定义代码提示</p>
</blockquote>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-php" data-lang="php">文件-&gt;首选项-&gt;用户代码片段
编辑 markdown.json
文件-&gt;首选项-&gt;设置-&gt; 增加 &#34;editor.tabCompletion&#34;: true</code></pre></div>
<p><a href="https://code.visualstudio.com/docs/editor/userdefinedsnippets">参考资料</a></p>

<h2 id="代码片段">代码片段</h2>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js">{
	<span style="color:#e6db74">&#34;img&#34;</span><span style="color:#f92672">:</span>{
		<span style="color:#e6db74">&#34;prefix&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;img&#34;</span>,
		<span style="color:#e6db74">&#34;body&#34;</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#34;![${1:Image Title}](${2:Image Source}) ${0}&#34;</span>],
		<span style="color:#e6db74">&#34;description&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;img&#34;</span>
	},

	<span style="color:#e6db74">&#34;code&#34;</span><span style="color:#f92672">:</span>{
		<span style="color:#e6db74">&#34;prefix&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;code&#34;</span>,
		<span style="color:#e6db74">&#34;body&#34;</span><span style="color:#f92672">:</span> [<span style="color:#e6db74">&#34;`${1:Inline Code Snippet}` ${0}&#34;</span>],
		<span style="color:#e6db74">&#34;description&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;code&#34;</span>
	},
	<span style="color:#e6db74">&#34;hr&#34;</span><span style="color:#f92672">:</span>{
		<span style="color:#e6db74">&#34;prefix&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;hr&#34;</span>,
		<span style="color:#e6db74">&#34;body&#34;</span><span style="color:#f92672">:</span> [
			<span style="color:#e6db74">&#34;---&#34;</span>,
			<span style="color:#e6db74">&#34;${0}&#34;</span>
		],
		<span style="color:#e6db74">&#34;description&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;hr&#34;</span>
	},
	<span style="color:#e6db74">&#34;ol&#34;</span><span style="color:#f92672">:</span>{
		<span style="color:#e6db74">&#34;prefix&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;ol&#34;</span>,
		<span style="color:#e6db74">&#34;body&#34;</span><span style="color:#f92672">:</span> [
			<span style="color:#e6db74">&#34;1. ${1:First Item}&#34;</span>,
			<span style="color:#e6db74">&#34;2. ${2:Second Item}&#34;</span>,
			<span style="color:#e6db74">&#34;3. ${3:Third Item}&#34;</span>,
			<span style="color:#e6db74">&#34;${0}&#34;</span>
		],
		<span style="color:#e6db74">&#34;description&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;ol&#34;</span>
	},
	<span style="color:#e6db74">&#34;pre&#34;</span><span style="color:#f92672">:</span>{
		<span style="color:#e6db74">&#34;prefix&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;pre&#34;</span>,
		<span style="color:#e6db74">&#34;body&#34;</span><span style="color:#f92672">:</span> [
			<span style="color:#e6db74">&#34;```${1:language}&#34;</span>,
			<span style="color:#e6db74">&#34;${2:Multi-line Code}&#34;</span>,
			<span style="color:#e6db74">&#34;```&#34;</span>,
			<span style="color:#e6db74">&#34;${0}&#34;</span>
		],
		<span style="color:#e6db74">&#34;description&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;pre&#34;</span>
	},
	<span style="color:#e6db74">&#34;strike&#34;</span><span style="color:#f92672">:</span>{
		<span style="color:#e6db74">&#34;prefix&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;strike&#34;</span>,
		<span style="color:#e6db74">&#34;body&#34;</span><span style="color:#f92672">:</span> [
			<span style="color:#e6db74">&#34;~~${1:Strike Through}~~ ${0}&#34;</span>
		],
		<span style="color:#e6db74">&#34;description&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;strike&#34;</span>
	},
	<span style="color:#e6db74">&#34;table&#34;</span><span style="color:#f92672">:</span>{
		<span style="color:#e6db74">&#34;prefix&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;table&#34;</span>,
		<span style="color:#e6db74">&#34;body&#34;</span><span style="color:#f92672">:</span> [
			<span style="color:#e6db74">&#34;| ${1:Column 1} | ${2:Column 2} |&#34;</span>,
			<span style="color:#e6db74">&#34;| ------------- | ------------- |&#34;</span>,
			<span style="color:#e6db74">&#34;| ${3:Cell 1-1} | ${4:Cell 1-2} |&#34;</span>,
			<span style="color:#e6db74">&#34;| ${5:Cell 2-1} | ${6:Cell 2-2} |&#34;</span>,
			<span style="color:#e6db74">&#34;${0}&#34;</span>
		],
		<span style="color:#e6db74">&#34;description&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;table&#34;</span>
	},
	<span style="color:#e6db74">&#34;ul&#34;</span><span style="color:#f92672">:</span>{
		<span style="color:#e6db74">&#34;prefix&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;ul&#34;</span>,
		<span style="color:#e6db74">&#34;body&#34;</span><span style="color:#f92672">:</span> [
			<span style="color:#e6db74">&#34;- ${1:I} &#34;</span>,
			<span style="color:#e6db74">&#34;- ${2:Love}&#34;</span>,
			<span style="color:#e6db74">&#34;- ${3:Markdown}&#34;</span>,
			<span style="color:#e6db74">&#34;${0}&#34;</span>
		],
		<span style="color:#e6db74">&#34;description&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;ul&#34;</span>
	},
	<span style="color:#e6db74">&#34;bq&#34;</span><span style="color:#f92672">:</span>{
		<span style="color:#e6db74">&#34;prefix&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;bq&#34;</span>,
		<span style="color:#e6db74">&#34;body&#34;</span><span style="color:#f92672">:</span> [
			<span style="color:#e6db74">&#34;&gt; ${1:Put a nice, beautiful}&#34;</span>,
            <span style="color:#e6db74">&#34;&gt; ${2:quote here...}&#34;</span>,
            <span style="color:#e6db74">&#34;${0}&#34;</span>
		],
		<span style="color:#e6db74">&#34;description&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;bq&#34;</span>
	},
	<span style="color:#e6db74">&#34;a&#34;</span><span style="color:#f92672">:</span>{
		<span style="color:#e6db74">&#34;prefix&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;a&#34;</span>,
		<span style="color:#e6db74">&#34;body&#34;</span><span style="color:#f92672">:</span> [
			<span style="color:#e6db74">&#34;[${1:Link Title}](${2:Link Source}) ${0}&#34;</span>
		],
		<span style="color:#e6db74">&#34;description&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;a&#34;</span>
	},

	<span style="color:#e6db74">&#34;h1&#34;</span><span style="color:#f92672">:</span>{
		<span style="color:#e6db74">&#34;prefix&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;h1&#34;</span>,
		<span style="color:#e6db74">&#34;body&#34;</span><span style="color:#f92672">:</span> [
			<span style="color:#e6db74">&#34;# ${1:Heading 1}&#34;</span>,
			<span style="color:#e6db74">&#34;${0}&#34;</span>
		],
		<span style="color:#e6db74">&#34;description&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;h1&#34;</span>
	},
	<span style="color:#e6db74">&#34;h2&#34;</span><span style="color:#f92672">:</span>{
		<span style="color:#e6db74">&#34;prefix&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;h2&#34;</span>,
		<span style="color:#e6db74">&#34;body&#34;</span><span style="color:#f92672">:</span> [
			<span style="color:#e6db74">&#34;## ${2:Heading 2}&#34;</span>,
			<span style="color:#e6db74">&#34;${0}&#34;</span>
		],
		<span style="color:#e6db74">&#34;description&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;h2&#34;</span>
	},
	<span style="color:#e6db74">&#34;h3&#34;</span><span style="color:#f92672">:</span>{
		<span style="color:#e6db74">&#34;prefix&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;h3&#34;</span>,
		<span style="color:#e6db74">&#34;body&#34;</span><span style="color:#f92672">:</span> [
			<span style="color:#e6db74">&#34;### ${3:Heading 3}&#34;</span>,
			<span style="color:#e6db74">&#34;${0}&#34;</span>
		],
		<span style="color:#e6db74">&#34;description&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;h3&#34;</span>
	}
}
</code></pre></div>
  </div>
</article>

<article class="hentry">
  <header>
    
      <div class="entry-image-index">
		  <a href="/dev/blog_performance/" title="如何提高blog载入速度"><img src="/images/abstract-11.jpg" alt="如何提高blog载入速度"></a>
      </div>
    
    <div class="entry-meta">
         
		<span class="entry-date date published updated"><time datetime="2018-05-08 00:00:00 &#43;0000 UTC"><a href="/dev/blog_performance/">May 8, 2018</a></time></span>
        
      <span class="entry-reading-time">
        <i class="fa fa-clock-o"></i>
        Reading time ~1 minute
      </span>
    </div>
    
	<h1 class="entry-title"><a href="/dev/blog_performance/" rel="bookmark" title="如何提高blog载入速度" itemprop="url">如何提高blog载入速度</a></h1>
    
  </header>
  <div class="entry-content">
    

<blockquote>
<p>如何让我们的网站在毫秒内打开是每个web开发者必须考虑的事情。人类的耐心有限。
如果毫秒内不能打开，意味着你的客户白白流失。</p>
</blockquote>

<p>google提供了一个工具，只要输入网址，就可以分析页面存在的问题
首先：打开谷歌在线验证页，输入我的首页URL，点击验证</p>

<pre><code>http://developers.google.com/speed/pagespeed/insights/
</code></pre>

<p>google web tools 验证出好多问题，逐一解决：</p>

<h1 id="找出性能瓶颈">找出性能瓶颈</h1>

<p>把不需要每次都加载的资源缓存到客户端。
这个可以直接更改nginx的配置。 增加压缩gzip。减少带宽传输</p>

<pre><code>server {
gzip  on;
gzip_http_version 1.1;
gzip_vary on;
gzip_comp_level 6;
gzip_proxied any;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_buffers 16 8k;
gzip_disable &quot;MSIE [1-6]\.(?!.*SV1)&quot;;
</code></pre>

<h2 id="增加缓存时间">增加缓存时间</h2>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-java" data-lang="java">location <span style="color:#f92672">~*</span> <span style="color:#960050;background-color:#1e0010">\</span><span style="color:#f92672">.(</span>js<span style="color:#f92672">|</span>css<span style="color:#f92672">|</span>png<span style="color:#f92672">|</span>jpg<span style="color:#f92672">|</span>jpeg<span style="color:#f92672">|</span>gif<span style="color:#f92672">|</span>ico<span style="color:#f92672">)</span>$ <span style="color:#f92672">{</span>
        proxy_pass http:<span style="color:#75715e">//172.16.11.154:4000;
</span><span style="color:#75715e"></span>        proxy_cache_min_uses 1<span style="color:#f92672">;</span>
        proxy_cache_valid 200 301 302 120m<span style="color:#f92672">;</span>
        proxy_cache_valid 404 1m<span style="color:#f92672">;</span>
        expires max<span style="color:#f92672">;</span>
<span style="color:#f92672">}</span></code></pre></div>
<h2 id="合并压缩css">合并压缩css</h2>

<p>为了减少http请求次数，需要把多个css 文件和 js文件合并起来，利用yahoo的 <code>YUI Compressor</code>可以把多个ccs文件或者js文件合并成一个单一文件，降低请求次数。</p>

<pre><code>http://refresh-sf.com/yui/
</code></pre>

<h2 id="最后一步">最后一步</h2>

<p>异步加载css和js ，TODO
异步加载评论模块（disqus），此模块为国外组织开发，每次打开都耗时极长。
可以调整为异步加载，当有客户需要评论是，按需打开评论模块。
但这个很矛盾，如果客户想评论时，这个时候点击评论，打开还是很慢的。
如果客户看完文章在评论，这个时候评论已经是打开状态，反而体验要好一点。
这个目前还没有别的方案。暂时先这样吧。</p>

  </div>
</article>





</div>

<div class="footer-wrapper">
  <footer role="contentinfo">
    <span> Powered by <a href="https://gohugo.io/" rel="nofollow">Hugo</a> using the <a href="https://github.com/dldx/hpstr-hugo-theme" rel="nofollow">HPSTR</a> theme.</span>

  </footer>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="\/js\/vendor\/jquery-1.9.1.min.js"><\/script>')</script>
<script src="/js/scripts.min.js"></script>



</body>
</html>

